<template>
  <div class="item-content">
    <div :class="['item', content.className || '']">
      <i class="angle"></i>
      <img v-if="content.icon" :src="content.icon" alt="" srcset="" />
      <span class="label">{{ content.label }}</span>
      <span class="value">{{ content.value }}</span>
      <i
        v-if="content.children && content.children.length > 0"
        class="line"
        :style="{
          height:
            content.children.length == 1
              ? '28px'
              : `calc(28px + 46px * ${content.children.length - 1})`,
        }"
      ></i>
    </div>
    <template v-if="content.children && content.children.length > 0">
      <template v-for="(item, j) in content.children">
        <Item :content="item"></Item>
      </template>
    </template>
  </div>
</template>
<script>
// import {foreachTreeDataCtrl} from "@/utils/tree"
export default {
  name: "Item",
  props: {
    content: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {};
  },
  computed: {
    displayContent() {
      return this.content;
    },
  },
  methods: {
    formatterLevel() {},
  },
};
</script>
<style lang="scss" scoped>
.item-content {
  padding-left: 40px;
  &:first-child {
    padding-left: 0;
    & > .item {
      .angle {
        display: none;

        &::before {
          display: none;
        }
      }
    }
  }
}
.item {
  height: 36px;
  line-height: 36px;
  padding: 0 12px;
  border: 1px solid #e9ebf1;
  border-radius: 2px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  position: relative;

  img {
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
  }

  .label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #7d8292;
  }

  .value {
    font-weight: 600;
    color: #1f2e4d;
  }

  .angle {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #bfc2cb;
    left: -5px;
    top: 50%;
    transform: translate(-50%, -50%);

    &::before {
      content: "";
      position: absolute;
      width: 10px;
      height: 1px;
      left: -18px;
      top: calc(50% - 1px);
      background: #bfc2cb;
    }
  }

  .line {
    position: absolute;
    left: 16px;
    bottom: -1px;
    width: 1px;
    height: 28px;
    transform: translateY(100%);
    background: #cccccc;
  }
}
</style>
